<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="user/index/include_file::header"></head>
<style>
    .layui-upload-file {
        display: none !important;
    }
     .user_name {
         font-size: 16px;
     }

    .create_time {
        font-size: 14px;
        text-align: right;
    }

    .content {
        font-size: 16px;
        margin-left: 50px;
    }

    .eachlist {
        border-bottom: 1px dotted gray;
    }

    .post-preview{
        border: 3px dotted #337ab7;
        margin-bottom: 20px;
    }
</style>
<body>
<nav th:include="user/index/include_file::nav"
     class="navbar navbar-default navbar-custom navbar-fixed-top"></nav>
<header class="intro-header"
        style="background-image: url('/img/blog/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <span class="subheading">多媒体素材系统</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 file-manager">
            <button type="button" id="test1" class="btn-primary"
                    style="margin-bottom: 15px;">
                我要上传
            </button>
            <div id="incomeNum"></div>
            <div class="clearfix">
                <p id="flagLoaded" style="display: none; text-align: center;">
                    已全部加载</p>
                <a id="flagLoad" style="display: none;"
                   class="btn btn-secondary float-right"
                   href="javascript:void(0)" onclick="nextPage()">更早 &rarr;</a>
            </div>
        </div>
    </div>
</div>
</body>
<div th:include="user/index/include_file::footer"></div>
<script type="text/javascript">
    var limit = 10;
    var currentPage = 0;
    var total;
    $(function () {
        bindList(0);
    });

    function nextPage() {
        bindList(currentPage * limit)
    }

    function bindList(offset) {
        $('#incomeNum').html("");
        $
            .ajax({
                url: '/common/sysFile/minefile?limit=10&offset=' +
                offset,
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    var rows = data.rows;
                    total = data.total;
                    var htmlText = "";
                    for (var i = 0; i < rows.length; i++) {
                        htmlText += '<div class="post-preview"><div>';
                        if (rows[i].fileRelation.type == 0) {
                            htmlText +=
                                '<img  style="width: 400px;height: 400px;" src="' +
                                rows[i].fileRelation.url + '">';
                        } else if (rows[i].fileRelation.type == 1) {
                            htmlText += '<a>文档素材</a>';
                        } else if (rows[i].fileRelation.type == 2) {
                            htmlText +=
                                '<video style="width: 400px;height: 400px;" controls="controls" src="' +
                                rows[i].fileRelation.url + '"></video>';
                        } else if (rows[i].fileRelation.type == 3) {
                            htmlText +=
                                '<audio  controls="controls" src="' +
                                rows[i].fileRelation.url + '"></audio>';
                        }
                        if (rows[i].fileRelation.fileType === 'member') {
                            htmlText += '（会员可以下载）';
                        }
                        htmlText += '</div><button  class="btn-primary" onclick="remove(' +
                            rows[i].id + ')">删除</button>&nbsp;&nbsp;';
                        if (rows[i].fileRelation.fileType !== 'member') {
                            htmlText +=
                                '<button  class="btn-primary" onclick="convert(' +
                                rows[i].fileRelation.id +
                                ')" ">转为会员类型</button>';
                        }
                        //封装评论内容
                        htmlText +=
                            '<div style=" border: 2px solid gray;margin-left: 30px;">';
                        for (j = 0; j < rows[i].commentDOList.length; j++) {
                            htmlText = htmlText +
                                '<div class="eachlist"><div class="user_name">' + rows[i].commentDOList[j].userName + '</div>';
                            htmlText = htmlText + '<div class="content">' + rows[i].commentDOList[j].content + '</div>';
                            htmlText = htmlText + '<div class="create_time">' + rows[i].commentDOList[j].createTime + '</div></div>';
                        }
                        htmlText += '</div>';
                        htmlText += '</div>';
                    }
                    $("#incomeNum").append(htmlText);
                    document.getElementById("flagLoad").style.display = "block";
                    currentPage++;
                    if (total <= currentPage * limit) {
                        document.getElementById("flagLoaded").style.display = "block";
                        document.getElementById("flagLoad").style.display = "none";
                    }
                }
            });
    }

    function remove(id) {
        $.ajax({
            url: "/common/sysFile/remove",
            type: "post",
            data: {
                'id': id
            },
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    bindList(0);
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }

    function convert(id) {
        $.ajax({
            url: "/common/sysFile/convert",
            type: "post",
            data: {
                'id': id
            },
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    bindList(0);
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }
</script>
<script type="text/javascript">
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            url: '/common/sysFile/upload', //上传接口
            size: 1000,
            accept: 'file',
            done: function (r) {
                layer.msg(r.msg);
                bindList(0);
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });
    });
</script>
</html>
